<template>
    <view class="content">
        <view class="box">
            <view class="item">
                <view class="item-l">服务选择</view>
                <view class="item-r" @click="show = true">
                    <input type="text" v-model="week" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#535353" size="24"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="item-l">开始时间</view>
                <view class="item-r" @click="KStimeShow = true">
                    <input type="text" v-model="startTime" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#535353" size="24"></u-icon>
                </view>
            </view>
            <view class="item">
                <view class="item-l">结束时间</view>
                <view class="item-r" @click="JStimeShow = true">
                    <input type="text" v-model="endTime" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-down-fill" color="#535353" size="24"></u-icon>
                </view>
            </view>
            <view class="btn" @click="submit">确认</view>
        </view>
        
        <view class="time" v-if="list.length > 0">
            <view class="line"></view>
            <view class="u-p-l-15 u-p-r-15">时间设置</view>
            <view class="line"></view>
        </view>
        
        <view class="list" v-for="(item, index) in list" :key="index">
            <image src="../../static/icon/s_time.png" class="s-time"></image>
            <view class="text">{{item.week}}  {{item.start_time}}-{{item.end_time}}</view>
            <u-icon name="close-circle" color="#909db6" size="40" @click="del(item)"></u-icon>
        </view>
        
        <template v-if="show">
            <u-select v-model="show" mode="single-column" :list="weekList" @confirm="chooseWeek"></u-select>
        </template>
        <template v-if="KStimeShow">
            <u-select v-model="KStimeShow" mode="mutil-column" :list="timeList" @confirm="chooseTime(1, $event)"></u-select>
        </template>
        <template v-if="JStimeShow">
            <u-select v-model="JStimeShow" mode="mutil-column" :list="timeList" @confirm="chooseTime(2, $event)"></u-select>
        </template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                week: '',
                weekId: '',
                weekList: [{value: 1,label: '周一'},{value: 2,label: '周二'},{value: 3,label: '周三'},{value: 4,label: '周四'},{value: 5,label: '周五'},{value: 6,label: '周六'},{value: 7,label: '周日'}],
                KStimeShow: false, //开始时间
                JStimeShow: false, //结束时间
                startTime: '', //开始时间
                endTime: '', //结束时间
                list: [],//时间设置列表
                timeList: [
                    [{value: 0,label: '0时'},{value: 1,label: '1时'},{value: 2,label: '2时'},{value: 3,label: '3时'},{value: 4,label: '4时'},{value: 5,label: '5时'},{value: 6,label: '6时'},{value: 7,label: '7时'},{value: 8,label: '8时'},{value: 9,label: '9时'},{value: 10,label: '10时'},{value: 11,label: '11时'},{value: 12,label: '12时'},{value: 13,label: '13时'},{value: 14,label: '14时'},{value: 15,label: '15时'},{value: 16,label: '16时'},{value: 17,label: '17时'},{value: 18,label: '18时'},{value: 19,label: '19时'},{value: 20,label: '20时'},{value: 21,label: '21时'},{value: 22,label: '22时'},{value: 23,label: '23时'}],
                    [{value: '00',label: '00分'},{value: 10,label: '10分'},{value: 20,label: '20分'},{value: 30,label: '30分'},{value: 40,label: '40分'},{value: 50,label: '50分'}] ],
                
            };
        },
        onLoad() {
            this.getData()
        },
        methods: {
            del(item) {
                this.$ajax('delete_service_time', {
                	user_token: this.$getSync('userToken'),
                    id: item.id,
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.$toast('删除成功')
                        this.getData()
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            submit() {
                if (!this.weekId) {
                    this.$toast('请选择服务星期')
                    return
                }
                if (!this.startTime) {
                    this.$toast('请选择开始时间')
                    return
                }
                if (!this.endTime) {
                    this.$toast('请选择结束时间')
                    return
                }
                if (this.startTime == this.endTime) {
                    this.$toast('结束时间不能和开始时间相同')
                    return
                }
                this.$ajax('insert_service_time', {
                	user_token: this.$getSync('userToken'),
                    week_id: this.weekId,//星期id 1-7
                    start_time: this.startTime,//开始时间
                    end_time: this.endTime,//结束时间
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.week = ''
                        this.weekId = ''
                        this.startTime = ''
                        this.endTime = ''
                        this.$toast('提交成功');
                        this.getData()
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
            
            // 选择星期
            chooseWeek(e) {
                console.log(e)
                this.week = e[0].label
                this.weekId = e[0].value
            },
            
            //选择时间
            chooseTime(num, e) {
                console.log(e)
            	if (num == 1) {
                    // this.startTime = e.hour + ':' + e.minute
                    this.startTime = (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value 
            	}
                if (num == 2) {
                    // this.endTime = e.hour + ':' + e.minute
                    this.endTime = (e[0].value > 9 ? e[0].value : '0' + e[0].value) + ':' + e[1].value 
            	}
            },
            
            getData() {
                this.$ajax('service_time', {
                	user_token: this.$getSync('userToken'),
                }).then(ret => {
                	if (ret.success == 1000) {
                        this.list = ret.detail.service
                	} else {
                		this.$toast(ret.msg);
                	}
                });
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5;
    }
    .content{
        padding: 30rpx;
    }
    .box{
        padding: 0 30rpx 30rpx;
        background-color: #fff;
        border-radius: 15rpx;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
        font-size: 30rpx;
    }
    .item-l{
        color: #949494;
    }
    .item-r{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .inp{
        flex: 1;
        text-align: right;
        padding: 0 15rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 20rpx;
        background-color: #f29700;
        border-radius: 10rpx;
        margin-top: 30rpx;
    }
    
    .time{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        font-size: 28rpx;
        color: #8b8b8b;
    }
    .line{
        width: 260rpx;
        height: 2rpx;
        background-color: #cbcbcb;
    }
    
    .list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 35rpx;
        background-color: #fff;
        border-radius: 15rpx;
        margin-bottom: 20rpx;
    }
    .s-time{
        width: 36rpx;
        height: 36rpx;
    }
    .text{
        flex: 1;
        font-size: 32rpx;
        color: #42506c;
        padding: 0 30rpx;
    }
    

</style>
